<template>
  <div class="GH">
    <mt-header title="我的挂号" style="background-color: white; color: black">
      <div @click="$router.go(-1)" slot="left">
        <mt-button icon="back" style="color: black"></mt-button>
      </div>
    </mt-header>

    <!-- 挂号Nav -->
    <!-- <div class="aboutContent"> -->
    <div class="course_tab">
      <div class="tab_item">
        <div
          class="tab_text"
          :class="tabIndex == 0 ? 'act_tab' : 'act_tab2'"
          @click="changeTab"
          data-index="0"
        >
          全部
        </div>
        <div class="tab_logo" v-if="tabIndex == 0"></div>
      </div>

      <div class="tab_item">
        <div
          class="tab_text"
          :class="tabIndex == 1 ? 'act_tab' : 'act_tab2'"
          @click="changeTab"
          data-index="1"
        >
          待就诊
        </div>
        <div class="tab_logo" v-if="tabIndex == 1"></div>
      </div>
      <div class="tab_item">
        <div
          class="tab_text"
          :class="tabIndex == 2 ? 'act_tab' : 'act_tab2'"
          @click="changeTab"
          data-index="2"
        >
          已取消
        </div>
        <div class="tab_logo" v-if="tabIndex == 2"></div>
      </div>

      <div class="tab_item">
        <div
          class="tab_text"
          :class="tabIndex == 3 ? 'act_tab' : 'act_tab2'"
          @click="changeTab"
          data-index="3"
        >
          已完成
        </div>
        <div class="tab_logo" v-if="tabIndex == 3"></div>
      </div>
    </div>
    <!-- </div> -->

    <!-- 内容部分 -->
    <div class="listContent">
      <div v-if="tabIndex == 0">
        <!-- 无信息 -->
        <!-- <div class="logText">
        <div class="logoBox">
          <img
            class="logoimg"
            src="../../assets/imageW/ghIcon.png"
            mode="widthFix"
            alt=""
          />
        </div>
        <div class="aboutText">还没有挂号记录</div>
      </div> 
    </div> -->

        <!-- 有信息 -->
        <div class="List">
          <div class="box">
            <div
              class="ghList"
              v-for="(item, id) in ghlist"
              :key="id"
              @click="$router.push(`/yuyuedetail?id=${item.id}`)"
            >
              <div class="ghTop">
                <div class="ghLeft">
                  <span class="noqx">{{!item.qxgh?'已取消':(item.qxgh&&item.issee?'已就诊':'待就诊')}}</span
                  ><span class="again" v-if="!item.qxgh" @click.stop="$router.push(`/doctorDetail?${item.ysid}`)">再次预约</span>
                </div>
                <img
                  class="jiet"
                  src="../../assets/imageW/ic_y@2x.png"
                  alt=""
                />
              </div>

              <div class="ghInfo">
                <div class="ghName">{{ item.hospital }}</div>
                <div class="info">
                  <div class="doctorN">{{ item.dname }}</div>
                  <div class="priceText">医事服务费：{{ item.price }}</div>
                </div>
                <div class="timeText">就诊时间：{{ item.register_time }}</div>
              </div>
            </div>
          </div>
          <div class="course_no">没有更多数据啦~</div>
        </div>
      </div>

      <div v-if="tabIndex == 1">
        <div class="List">
          <div class="box">
            <div
              class="ghList"
              v-for="(item, id) in ghlist.filter((v) => v.qxgh&&!v.issee )"
              :key="id"
              @click="$router.push(`/yuyuedetail?id=${item.id}`)"
            >
              <div class="ghTop">
                <div class="ghLeft">
                  <span class="noqx">待就诊</span>
                  <!-- <span class="again">再次预约</span> -->
                </div>
                <img
                  class="jiet"
                  src="../../assets/imageW/ic_y@2x.png"
                  alt=""
                />
              </div>

              <div class="ghInfo">
                <div class="ghName">{{ item.hospital }}</div>
                <div class="info">
                  <div class="doctorN">{{ item.dname }}</div>
                  <div class="priceText">医事服务费：{{ item.price }}</div>
                </div>
                <div class="timeText">就诊时间：{{ item.register_time }}</div>
              </div>
            </div>
          </div>
          <div class="course_no">没有更多数据啦~</div>
        </div>
      </div>

      <div v-if="tabIndex == 2">
        <!-- <div class="logText">
        <div class="logoBox">
          <img
            class="logoimg"
            src="../../assets/imageW/ghIcon.png"
            mode="widthFix"
            alt=""
          />
        </div>
        <div class="aboutText">还没有挂号记录</div>
      </div>  -->
        <!-- 有信息 -->
        <div class="box">
          <div
            class="ghList"
            v-for="(item, id) in ghlist.filter((v) => !v.qxgh)"
            @click="$router.push(`/yuyuedetail?id=${item.id}`)"
            :key="id"
          >
            <div class="ghTop">
              <div class="ghLeft">
                <span class="noqx">已取消</span
                ><span class="again">再次预约</span>
              </div>
              <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
            </div>

            <div class="ghInfo">
              <div class="ghName">{{ item.hospital }}</div>
              <div class="info">
                <div class="doctorN">{{ item.dname }}</div>
                <div class="priceText">医事服务费：{{ item.price }}</div>
              </div>
              <div class="timeText">就诊时间：{{ item.register_time }}</div>
            </div>
          </div>
        </div>
        <div class="course_no">没有更多数据啦~</div>
      </div>

      <div v-if="tabIndex == 3">
        <!-- <div class="logText">
          <div class="logoBox">
            <img
              class="logoimg"
              src="../../assets/imageW/ghIcon.png"
              mode="widthFix"
              alt=""
            />
          </div>
          <div class="aboutText">还没有挂号记录</div>
        </div> -->
        <div class="box">
          <div
            class="ghList"
            v-for="(item, id) in ghlist.filter((v) => v.issee&&v.qxgh)"
            @click="$router.push(`/yuyuedetail?id=${item.id}`)"
            :key="id"
          >
            <div class="ghTop">
              <div class="ghLeft">
                <span class="noqx">已就诊</span
                ><span class="again">再次预约</span>
              </div>
              <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
            </div>

            <div class="ghInfo">
              <div class="ghName">{{ item.hospital }}</div>
              <div class="info">
                <div class="doctorN">{{ item.dname }}</div>
                <div class="priceText">医事服务费：{{ item.price }}</div>
              </div>
              <div class="timeText">就诊时间：{{ item.register_time }}</div>
            </div>
          </div>
        </div>
        <div class="course_no">没有更多数据啦~</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  filters: {
    zt: function (value) {
      return value ? "已取消" : "待就诊";
    },
  },
  data() {
    return {
      tabIndex: 0,
      ghlist: [],
    };
  },
  mounted() {
    this.doctorGH();
  },
  watch:{
    tabIndex(){
      this.doctorGH()
    }
  },
  methods: {
    changeTab(e) {
      this.tabIndex = e.currentTarget.dataset.index;
    },
    goDetail() {
      this.$router.push("/yuyueDetail");
    },
    // 显示挂号数据
    doctorGH() {
      // let parms = `yhid=${this.$store.state.phone}`
      this.axios
        .get(`/users/my_reg?yhid=${this.$store.state.phone}`)
        .then((res) => {
          // this.res = res.data
          this.ghlist = res.data.data;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.GH{
  height: 100vh;
}
.logText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 260px;
}

body,
html {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #f4f5f7;
}
.GH {
  background-color: #f4f5f7;
}
// .aboutContent {
//   padding: 1vh 3vh;
//   box-sizing: border-box;
// }
.course_tab {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  background-color: white;
  padding: 0px 20px;
  // position: fixed;
  // top: 32px;
  // left: 0;
}

.tab_item {
  position: relative;
  width: 82px;
}

.tab_text {
  height: 12px;
  color: #fff;
  opacity: 0.6000000238418579;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.tab_logo {
  background-color: #18f8dc;
  position: absolute;
  bottom: 0;
  left: 9px;
  width: 42px;
  height: 3px;
  border-radius: 26px;
}
.act_tab {
  height: 32px;
  color: #000;
  opacity: 1;
  font-size: 14px;
  font-weight: 500;
}
.act_tab2 {
  height: 32px;
  color: #c5cdcc;
  opacity: 1;
  font-size: 14px;
  font-weight: 500;
}
.logoBox {
  width: 180px;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin: 80px auto 0;
}
.logoimg {
  width: 180px;
  height: 220px;
}
.logoimg image {
  width: 100%;
}
.aboutText {
  text-align: center;
  color: black;
  letter-spacing: 2px;
  line-height: 38px;
  font-weight: 500;
}
// .listContent{
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
// }

// }
// 内容列表
.List {
  overflow-y: scroll;
  overflow: hidden;
  padding: 0 2vh;
}
.box {
  display: flex;
  flex-direction: column-reverse;
}

.ghList {
  border-radius: 10px;
  margin: 10px 0 0;
  background-color: white;
  padding: 2vh 3vh;
  box-sizing: border-box;
  overflow: hidden;
  overflow: scroll;
  
}
.ghTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ghLeft {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.noqx {
  color: #c5cdcc;
  font-size: 16px;
  margin-right: 10px;
}
.again {
  padding: 2vw;
  display: flex;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 12px;
  box-sizing: border-box;
  background-color: #d5edfb;
  color: #23dbc1;
}
.jiet {
  width: 22px;
  height: 22px;
}
.jiet image {
  width: 100%;
}
.ghInfo {
  margin: 10px 0;
  padding: 8px 0 0;
  box-sizing: border-box;
}
.ghName {
  font-weight: 600;
  font-size: 18px;
}
.info {
  display: flex;
  justify-content: space-between;
  color: #9d9f9f;
  width: 180px;

  margin: 8px 0;
}
.timeText {
  color: #9d9f9f;
  width: 180px;
  margin: 8px 0;
}
.course_no {
  margin: 12px 0;
  text-align: center;
  color: #c5cdcc;
  font-size: 14px;
}
</style>